<!--
 * @Author: zhangyang
 * @Date: 2022-03-01 10:34:16
 * @LastEditTime: 2022-05-30 16:09:05
 * @Description: 默认布局
-->
<script lang="ts" setup>
import SiderBar from './components/SiderBar.vue';
import Header from './components/Header.vue';
import TagsView from './components/TagsView.vue';

import { storeToRefs } from 'pinia';
import { useTagsStore } from '@/stores';
const route = useRoute();
const { cachedViews, visitedViews } = storeToRefs(useTagsStore());
const path = computed(() => route.path);
const name = computed(() => route.name);
const isCached = computed(() => {
  // 无需缓存的界面
  if (route.meta.noCache) {
    return false;
  }
  const arr = visitedViews.value.map((view) => view.name);
  // 已经缓存，或者首次打开(防止二次初始化)
  return cachedViews.value.includes(name.value) || !arr.includes(name.value as unknown as string);
});
</script>

<template>
  <NLayout has-sider>
    <SiderBar />
    <NLayout>
      <NLayoutHeader bordered >
        <Header class="h-5vh" />
      </NLayoutHeader>
      <NLayoutHeader bordered>
        <TagsView class="h-2.9vh" />
      </NLayoutHeader>
      <NLayoutContent content-style="height: 91vh;">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <div>
              <keep-alive>
                <component v-if="isCached" :is="Component" :key="path" />
              </keep-alive>
              <component v-if="!isCached" :is="Component" :key="path" />
            </div>
          </transition>
        </router-view>
      </NLayoutContent>
    </NLayout>
  </NLayout>
</template>
